<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CPT 238 Project1</title>
    <style>
      /* Your CSS code goes here */
      html {
        background-image: url(Images/1990sWallPaper.jpg);
      }
      body {
          
          font-family: Arial, sans-serif;
      }
      h1 {
        text-align: center;
        background-color: rgba(255, 255, 255, .5);
        color: #007bff;
        font-family: 'Comic Sans MS', cursive, sans-serif;
      }

      h3 {
        font-family: 'Comic Sans MS', cursive, sans-serif;
      }

      form {
        background-color: #ffffff;
        border: 2px solid;
        margin: 15px 60px 15px 60px;
        text-align: center;
        padding: 10px;
      }

      /* Add more styles as needed */
  </style>
</head>
<body>
 
<h1>The Totally 1990s Number/Word Playground!!!</h1>

<form id="Fatorial" method="post">
  <h3>Enter a Number and I will Factorial a Number :D</h3>
  <input type="text" id="numberInput" placeholder="Enter a non-negative integer">
  <button onclick="calculateFactorial()">Calculate Factorial</button>

  <script>
    function calculateFactorial() {
      // Get the input value
      const inputElement = document.getElementById('numberInput');
      const inputValue = inputElement.value;

      // Check if the input is a valid number
      if (isNaN(inputValue) || inputValue < 0) {
        alert('Please enter a valid non-negative number.');
        return;
      }

      // Calculate the factorial
      let factorialResult = 1;
      for (let i = 2; i <= inputValue; i++) {
        factorialResult *= i;
      }

      // Open a new window to display the result
      const resultWindow = window.open("", "_blank");
      resultWindow.document.write(`
        <html>
        <head>
            <title>Factorial Result</title>
            <style>

                body {
                    text-align: center;
                    font-family: 'Comic Sans MS', cursive, sans-serif;
                    background-image: url(Images/BillClintonTU.jpg);
                    background-size: cover;
                }
                h1 {
                  font-size: 5em;
                    color: #333;
                    background-color: rgba(255, 255, 255, .5);
                }
                p {
                  font-size: 4em;
                    font-size: 18px;
                    color: #555;
                    background-color: rgba(255, 255, 255, .5);
                }
                button {
                    padding: 10px 20px;
                    font-size: 16px;
                    background-color: #4CAF50;
                    color: #fff;
                    border: none;
                    cursor: pointer;
                }
                button:hover {
            transform: scale(0.9); /* Shrink the size on hover */
            background-color: #2980b9; /* Change the background color on hover */
        }
            </style>
        </head>
        <body>
            <h1>Factorial Result</h1>
            <p>${factorialResult}</p><br>
            <button onclick="window.close(); window.close();">Go Back</button><br>
        </body>
        </html>
    `);
     }
  </script>
</input>
</form>

<form id="Two Numbers" method="get">
  <h3>Enter Two Numbers and I Will Find the Sum, Average, High and Low XD </h3>
  <button onclick="calculateStatistics()">Add Numbers</button> 
 <script>
  function calculateStatistics() {
    let sum = 0;
    let count = 0;
    let high = Number.MIN_SAFE_INTEGER;
    let low = Number.MAX_SAFE_INTEGER;

    while (true) {
        let input = prompt("Enter a number (Press 'Cancel' to finish):");

        if (input === null) {
            break; // Exit the loop if the user presses 'Cancel'
        }

        let num = parseFloat(input);

        if (!isNaN(num)) {
            // Update sum, count, high, and low
            sum += num;
            count++;
            if (num > high) {
                high = num;
            }
            if (num < low) {
                low = num;
            }
        } else {
            alert("Invalid input. Please enter a valid number.");
        }
    }

    // Calculate average
    let average = count > 0 ? sum / count : 0;

    // Display the results on another webpage (replace 'output.html' with your desired page)
    window.location.href = `output.html?sum=${sum}&average=${average}&high=${high}&low=${low}`;
}
    const resultWindow = window.open("", "_blank");
      resultWindow.document.write(`
        <html>
        <head>
            <title>Factorial Result</title>
            <style>

                body {
                    text-align: center;
                    font-family: 'Comic Sans MS', cursive, sans-serif;
                    background-image: url(Images/MJTU.jpg);
                    background-size: cover;
                }
                h1 {
                  font-size: 5em;
                    color: #333;
                    background-color: rgba(255, 255, 255, .5);
                }
                p {
                  font-size: 4em;
                    font-size: 18px;
                    color: #555;
                    background-color: rgba(255, 255, 255, .5);
                }
                button {
                    padding: 10px 20px;
                    font-size: 16px;
                    background-color: #4CAF50;
                    color: #fff;
                    border: none;
                    cursor: pointer;
                }
                button:hover {
            transform: scale(0.9); /* Shrink the size on hover */
            background-color: #2980b9; /* Change the background color on hover */
        }
            </style>
        </head>
        <body>
            <h1>High, Low, Average, and Sum</h1>
            <p>Sum: " + sum + "</p>
            <p>Average: " + average + "</p>
            <p>Highest: " + highest + "</p>
            <p>Lowest: " + lowest + "</p>
            <button onclick="window.close(); window.close();">Go Back</button><br>
        </body>
        </html>
    `);
  </script>

</form>
    
<form id="String Maniulation" method="get">
  <h3>Enter a Word and a Number and I will do a Magic Trick! </h3>
  <script>
function processInputs() {
  const inputString = document.getElementById("inputString").value;
  const inputNumber = Number(document.getElementById("inputNumber").value);

  // Input validation
  if (inputString.length < inputNumber || isNaN(inputNumber)) {
    alert("Invalid input. String length and number must match, and the number must be a valid integer.");
    return;
  }

  const targetCharacter = inputString[inputNumber - 1];
  const concatenatedString = inputString.repeat(inputNumber);
  const reversedString = inputString.split("").reverse().join("");
  
  
  const resultWindow = window.open("", "_blank");
      resultWindow.document.write(`
        <html>
        <head>
            <title>String Results</title>
            <style>
              html {
                
              }
                body {
                    text-align: center;
                    font-family: 'Comic Sans MS', cursive, sans-serif;
                    background-image: url(Images/SouthparkTU.jpg);
                    // background-size: cover;
                }
                h1 {
                  display: inline-block;
                  font-size: 5em;
                  width:600px;
                  color: #333;
                  background-color: rgba(255, 255, 255, .9);
                }

                p {
                  font-size: 4em;
                    font-size: 18px;
                    color: #555;
                    background-color: rgba(255, 255, 255, .5);
                }
                
                button {
                    padding: 10px 20px;
                    font-size: 16px;
                    background-color: #4CAF50;
                    color: #fff;
                    border: none;
                    cursor: pointer;
                }
                button:hover {
            transform: scale(0.9); /* Shrink the size on hover */
            background-color: #2980b9; /* Change the background color on hover */
        }
            </style>
        </head>
        <body>
            <h1>String Results</h1>
            <p><b>${inputString}, ${targetCharacter}, ${concatenatedString}, ${reversedString}</b></p><br>
            <button onclick="window.close(); window.close();">Go Back</button><br>
        </body>
        </html>
    `);

  // alert(`Target character: ${targetCharacter}\nReversed string: ${reversedString}`);
}
</script>

<input type="text" id="inputString" placeholder="Enter a string">
<input type="number" id="inputNumber" placeholder="Enter a number">
<button onclick="processInputs()">Process</button>
</form>    
      
    

</body>
</html>